<!-- 机构管理 -->
<template>
    <div class="OrgManagement">
        <div class="top">
            <el-form ref="form" :model="form" label-width="120px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="机构名称">
                            <el-input v-model.trim="form.deptName" @keyup.enter.native="search" @change="resetPage">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <div class="btndiv">
                            <el-button v-blur class="query" @click="search">查询</el-button>
                            <el-button v-blur class="reset" @click="reset">重置</el-button>
                            <el-button v-blur class="added" @click="add">新增</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="tableDiv">
            <el-table stripe :data="tableData" style="border-radius: 6px" :header-cell-style="{
                color: '#333333', fontFamily: 'PingFang SC', fontSize: '14px', fontWeight: 500, background: '#F4F8FF',
                borderBottom: '1px solid #B9DAF2'
            }">
                <el-table-column type="aa" label="机构名称"></el-table-column>
                <el-table-column type="aa" label="机构类型"></el-table-column>
                <el-table-column type="aa" label="机构状态"></el-table-column>
                <el-table-column type="aa" label="所属地区"></el-table-column>
                <el-table-column prop="deptName" label="创建时间"></el-table-column>
                <el-table-column prop="" label="更新时间"></el-table-column>
                <el-table-column prop="operation" label="操作">
                    <template slot-scope="scope">
                        <el-button v-blur @click="edit(scope.$index, scope.row, $event)" type="warning" plain
                            size="mini">修改
                        </el-button>
                        <el-button v-blur @click="delet(scope.$index, scope.row, $event)" type="primary" plain
                            size="mini">查看
                        </el-button>
                        <el-button v-blur @click="delet(scope.$index, scope.row, $event)" type="danger" plain
                            size="mini">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagediv">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="recordsFiltered">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import '@/assets/queryPublic.css'
export default {
    name: 'OrgManagement',
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            recordsFiltered: 0,
            form: {
                deptName: "",
                deptBeltoRegiCode: "",
            },
            tableData: [],
            custTypeList: [],

        }
    },
    mounted() {

    },
    methods: {
        resetPage() {
            this.pageNum = 1;
        },
        search() {
            this.GetList()
        },
        reset() {
            this.pageNum = 1;
            this.form.deptName = "";
            this.form.deptBeltoRegiCode = "";
            this.GetList()
        },
        add() {
            this.$router.push({
                name: 'organizationModify',
                params: {
                    key: '新增组织结构'
                }
            })
        },
        GetList() {
            // const data = {
            //     "pageNum": this.pageNum,
            //     "pageSize": this.pageSize,
            //     "param": this.form
            // }
            // api.queryOrgDeptList(data).then(res => {
            //     this.tableData = res.data.data;
            //     this.recordsFiltered = res.data.recordsFiltered;
            // })
        },
        edit(i, r, e) {
            this.$router.push({
                name: 'organizationModify',
                params: {
                    id: r.deptNo,
                    key: '修改组织机构'
                }
            })
        },
   
        handleSizeChange(val) {
            this.pageSize = val;
            this.pageNum = 1;
            this.GetList()
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.GetList()
        },

    }
}
</script>

<style scoped lang='scss'>
.btndiv{
    text-align: center;
}
</style>
